<template>
        <bm-overlay ref="customOverlay" :class="{sample:true}" pane="labelPane" @draw="draw">
            <div class="upic" @touchend="speak(index,$event)">
                <!-- 显示默认头像 -->
                <yd-icon v-show="userShow" name="uphoto"  custom slot="icon" size=".32rem" :color='color' style="position:absolute;z-index:1;marginTop:.05rem"></yd-icon>
                <!-- 显示用户头像 -->
                <img :src="photo" v-show="!userShow" class="familyPhoto">
                <span class="uname" :style="{color:color}" v-if="zoomX">
                    <p>{{text}} </p>
                    <div class="num"  v-show="numShow">{{count}}</div>
                    <yd-icon v-show="labaShow" name="sound" class="sound" custom slot="icon" size=".3rem" :color='color'></yd-icon>
                    <yd-icon v-show="!msgShow" name="pic" class="fpic"  custom slot="icon" size=".3rem" :color='color'></yd-icon>
                </span>
            </div>
        </bm-overlay>
</template>
<script>
export default {
  props: ['text', 'position', 'color','index','soundShow','count','photo',"type",'zoom'],
  data(){
      return{
          clickColor:false,
            numShow:true,
            userShow:null,
            msgShow:true,
            zoomX:true,
      }
  },
  computed:{
    //   overColor(){//判断安是否需要改变颜色
    //       if(this.photo){
    //         return "#ff9800"
    //       }else{
    //            return this.color
    //       }
    //   },
    labaShow(){//判断消息类型
          if(this.photo){
              if(this.type=="text"){
                  this.msgShow=true
              }else{
                  this.msgShow=false
              }
              return this.msgShow
          }else{
              this.msgShow=true
              return this.soundShow
          }
      }
  },
  watch:{
      soundShow(newVal,oldVal){//监听喇叭显示隐藏，判断消息数显示隐藏
          this.numShow=!this.soundShow
          if(this.count==0||this.photo){
              this.numShow=false
          }
      },
      count(newVal,oldVal){//监听消息数量变化，如果数量为0隐藏，其余时候显示
            if(newVal==0||this.photo){
              this.numShow=false
          }else{
              this.numShow=!this.soundShow
          }
      },
      zoom(newVal,oldVal){
         if(newVal<=9){
             this.zoomX=false
         }else{
             this.zoomX=true
         } 
      }
  },
  methods:{
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 24 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    speak(index,e){//将当前点击下标传给父组件
        // if(this.photo){
        //     console.log("...")
        // }else{
            if(this.zoomX){
                 this.$emit("changeColor",index)
            }
           
        // }
        }
  },
  mounted(){
      if(this.count==0){//进入组件隐藏消息数为0的角标
          this.numShow=false
      }
      if(this.photo){//判断显示用户头像否
           this.numShow=false
          this.userShow=false
      }else{
          this.userShow=true
      }
  },
  activated(){
      if(this.photo){//判断显示用户头像否
           this.numShow=false
          this.userShow=false
      }else{
          this.userShow=true
      }
  }
}
</script>
<style lang="less" scoped>
@import "~less/base";
  .sample{
    position: absolute;
    .upic{
        min-width: 2.5rem;
        position: relative;
        .familyPhoto{
            width: .8rem;
            border-radius: 50%;
            position: absolute;
            z-index: 1;
            left:-22%;
            top:-60%;
            border:1px solid @color-border3;
        }
       .uname{//用户名
           display: inline-block;
           height: .42rem;
        //    line-height: .35rem;
           background-color: @background-b;
           font-size: 10px;
        //    padding:0.1rem .02rem 0.1rem .1rem;
           padding-left: .2rem;
        //    margin-left: .1rem;   
           box-shadow: .01rem .01rem .02rem @color-m;
           p{
               font-size: .14rem;
               display: inline-block;
               margin-top: .08rem;
               margin-left: .2rem;
               margin-right: .1rem;
           }
           .num{//角标
                border-radius: 50%;
                font-size: .12rem;
                width: .3rem;
                height: .3rem;
                line-height: .3rem;
                text-align: center;
                background-color: red;
                color: @color-c;
                float: right;
                margin-left: .1rem;
                margin-top: .04rem;
                margin-right: .08rem;
           }
           .fpic{//假图片
               float: right;
               margin-left: .1rem;
               margin-top: .04rem;
               margin-right: .08rem;
           }
           .sound{//喇叭
               margin-right:.08rem;
           }
       }
    }
  }

</style>
